<template>
    <div>
    <van-tabs v-model="activeName">
        <van-tab title="账号密码登录" name="a">
            <van-field v-model="userName"  left-icon="contact" placeholder="请输入用户名"/>
            <van-field v-model="password"  type="password" left-icon="bag-o" placeholder="请输入密码"/>
            <van-button type="info" style="width: 80%;margin-top: 30px; border-radius: 30px" @click="login">登录</van-button>
        </van-tab>
    </van-tabs>
        <div class="footer">
            <span @click="regis">用户注册</span> | <span @click="changefg">忘记密码</span>
        </div>
    </div>
</template>

<script>
    import {getLogin} from "../api/api";

    export default {
        name: "login1",
        data(){
            return{
                activeName:"",
                userName: "",
                password:"",
            }
        },
        methods:{
            regis(){
                this.$router.push('/login/register');
            },
            login(){
                // console.log(this.userName)
                getLogin(this.userName,this.password).then(res=>{
                    // console.log(res)
                    if(res.code==0){
                        this.$store.commit("login/changeIsLogin",true);
                        // console.log(this.$store.state["login/isLogin"]);
                        this.$router.push("/userInfo");

                    }else{
                        this.$toast(res.msg);
                    }
                })
            },
            changefg(){
                this.$router.push('/login/forget');
            }
        }
    }
</script>

<style lang="less" scoped>
    .footer{
        margin-top: 50%;
        text-align: center;
        font-size: 14px;
        span{
            margin: 0 20px;
        }
        span:hover{
            color: #409EFF;
        }
    }
</style>